<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="rqxqModal.show"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" :title="rqxqModal.title"></modalTitle>
    </template>
    <div style="padding: 0 10px 20px 10px" v-if="data">
      <div class="rqxqModal_infobox">
        <div class="rqxqModal_info_item">
          <div class="rqxqModal_info_item_label">姓名</div>
          <div class="rqxqModal_info_item_value">{{ data.name }}</div>
        </div>
        <!-- <div class="rqxqModal_info_item">
          <div class="rqxqModal_info_item_label">出生年月</div>
          <div class="rqxqModal_info_item_value">2025-02-08</div>
        </div>
        <div class="rqxqModal_info_item">
          <div class="rqxqModal_info_item_label">年龄</div>
          <div class="rqxqModal_info_item_value">32岁</div>
        </div> -->
        <div class="rqxqModal_info_item">
          <div class="rqxqModal_info_item_label">联系电话</div>
          <div class="rqxqModal_info_item_value">{{ data.phone }}</div>
        </div>
        <!-- <div class="rqxqModal_info_item">
          <div class="rqxqModal_info_item_label">设备编号</div>
          <div class="rqxqModal_info_item_value">123456476456</div>
        </div> -->
        <div class="rqxqModal_info_item" style="width: 100%">
          <div class="rqxqModal_info_item_label">住址</div>
          <div class="rqxqModal_info_item_value">{{ data.address }}</div>
        </div>
        <div class="rqxqModal_info_item" style="width: 100%">
          <div class="rqxqModal_info_item_label">内容</div>
          <div class="rqxqModal_info_item_value">{{ data.neirong }}</div>
        </div>
      </div>
      <!-- <div class="rqxqModal_tablebox">
        <div class="rqxqModal_tablebox_title">
          需求记录
        </div>
        <mTable :titleData="rqxqModal.titleData" :valueData="rqxqModal.valueData" @click-btn="rowClick"></mTable>
        <modalPage :total="100"></modalPage>
      </div> -->
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"
const rqxqModal = reactive({
  show: false,
  title: "人员详情",
  titleData: [
    {
      name: "内容",
      key: "content",
      align: true,
      style: {
        flex: 1,
        textAlign: "left"
      }
    },
    {
      name: "状态",
      key: "type",
      style: {
        width: "80px"
      }
    },
    {
      name: "时间",
      key: "date",
      style: {
        width: "100px"
      }
    }
  ],
  valueData: [
    {
      content: "内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情",
      type: "待处理",
      date: "2025-02-13 22:12"
    },
    {
      content: "内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情",
      type: "待处理",
      date: "2025-02-13 22:12"
    },
    {
      content: "内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情",
      type: "待处理",
      date: "2025-02-13 22:12"
    },
    {
      content: "内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情",
      type: "待处理",
      date: "2025-02-13 22:12"
    },
    {
      content: "内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情内容详情",
      type: "待处理",
      date: "2025-02-13 22:12"
    }
  ]
})
const emit = defineEmits(["close"])
const close = () => {
  rqxqModal.show = false
  emit("close")
}
const data = ref(null)
const show = (e) => {
  data.value = e
  rqxqModal.show = true
}

defineExpose({ show, close })
</script>
<style scoped lang="less">
.rqxqModal_tablebox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  width: 100%;
  margin-top: 10px;

  .rqxqModal_tablebox_title {
    color: #d5f2ff;
    margin-bottom: 10px;
  }
}

.rqxqModal_infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  width: 100%;

  .rqxqModal_info_item {
    width: 25%;
    margin-top: 5px;

    .rqxqModal_info_item_label {
      font-size: 10px;
    }

    .rqxqModal_info_item_value {
      font-size: 13px;
      // font-weight: bold;
    }
  }
}
</style>
